<template>
	<view>
		<image mode="widthFix" src="/static/yaobg.png" class="image posiab top0"></image>
		<image mode="widthFix" @click="back()" class="image posiab width30 top50 left30 zindex50" :style="{paddingTop:shh+'px'}" src="/static/back.png"></image>
		<view class="posiab flex-ju-c width1000 top40 colorfff" :style="{paddingTop:shh+'px'}">
			邀请排行榜
		</view>
		<view @click="navto('./yaoqing/index')" style="border-radius: 10rpx 0rpx 0rpx 10rpx;" class="posiab zindex100 flex-ju-c right0 size26 wh167-69 top130 bgfff" :style="{paddingTop:shh+'px'}">
			我的邀请
			<image mode="widthFix" src="/static/rights.png" class="image width15 ml15"></image>
		</view> 
		<view class="pt430 colorfff posire con">
			<view  class="center">
				<view  class="ml30 mt-160 posiab zindex51">
					<view class="mb30">NO.2</view>
					<view class="wh152-152 ra152 flex-ju-c" style="background: linear-gradient(90deg, #CAF881, #A0E99A);">
						<image v-if="invitelist[1]" class="wh97-97 ra97 borderfff" :src="invitelist[1].headimg"></image>
					</view>
				</view>
				<view class="flex-ju-c">
					<view  class=" mt-210 posiab zindex51">
						<view class="mb30">NO.1</view>
						<view class="wh152-152 ra152 flex-ju-c" style="background: linear-gradient(90deg, #CAF881, #A0E99A);">
							<image v-if="invitelist[0]" class="wh97-97 ra97 borderfff" :src="invitelist[0].headimg"></image>
						</view>
					</view>
				</view>
				<view class="flex flex-row">
					<view  class="mr30 mt-130 posiab zindex51">
						<view class="mb30">NO.3</view>
						<view class="wh152-152 ra152 flex-ju-c" style="background: linear-gradient(90deg, #CAF881, #A0E99A);">
							<image v-if="invitelist[2]" class="wh97-97 ra97 borderfff" :src="invitelist[2].headimg"></image>
						</view>
					</view>
				</view>
			</view>
			<image mode="widthFix" src="/static/wqeizhi.png" class="image "></image>
			<view  class="flex-ju-b size26 center mt-140 posire">
				<view class="felx1 width1000 center">
					<view v-if="invitelist[1]" class="one" >{{invitelist[1].name}}</view>
					<view v-if="invitelist[1]">{{invitelist[1].invite_num}}</view>
				</view>
				<view class="felx1 width1000 center">
					<view v-if="invitelist[0]" class="one">{{invitelist[0].name}}</view>
					<view v-if="invitelist[0]">{{invitelist[0].invite_num}}</view>
				</view>
				<view class="felx1 width1000 ">
					<view v-if="invitelist[2]" class="one ">{{invitelist[2].name}}</view>
					<view v-if="invitelist[2]">{{invitelist[2].invite_num}}</view>
				</view>
			</view>
			
			<view class="flex-ju-b size26 center mt80 color999 mb50 posire">
				<view class="width100">排名</view>
				<view class="mr50">用户</view>
				<view>邀新数</view>
			</view>
			<view v-if="isdata" class="flex-ju-c mt8vh">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			<template v-for="(item,index) in invitelist">
				<view  :key="index" v-if="index>2"  class="flex-ju-b size26 center mt30 color999 posire">
						<view class="width100">{{index+1}}</view>
						<view class="flex1 flex-ju-b ra15 bg21271D" style="border-top-left-radius: 50rpx;border-bottom-left-radius: 50rpx;">
							<view class="flex-a-i">
								<view class="wh100-100 ra100 flex-ju-c ml10 mt10 mb10" style="background: linear-gradient(90deg, #CAF881, #A0E99A);">
									<image class="wh70-70 ra70 borderfff" :src="item.headimg"></image>
								</view>
								<view class="ml80">{{item.name}}</view>
							</view>
							<view class="mr30">{{item.invite_num}}</view>
						</view>
				</view>
			</template>
			
			
			
			
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isdata:false,
				theme: uni.getStorageSync('theme'),
				invitelist: []
			}
		},
		onLoad() {
			this.http('invite/rank').then(res => {
				this.invitelist = res.data.list
				if(this.invitelist.length){
					this.isdata = false
				}else{
					this.isdata = true
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
page{
	background-color: #0F120D;
}
</style>
